<template>
    <div class="container">
        <!-- 顶部 -->
        <tab-head></tab-head>
        <!-- 内容 -->
        <van-tabs v-model:active="activeName" type="card" class="dataClass" title-active-color="#fff"
            @click-tab="onClickTab">
            <van-tab v-for="item in tabList" :key="item.id" :title="item.title" :name="item.title"
                title-style="font-size: 16px; font-weight: 600;">
                <template #title style="height: 100%;">
                    <img :src="activeName == item.title ? item.activeIcon : item.icon" style="width: 48px;height: 66px;"
                        alt="" srcset="">
                </template>
                <AUserRegulate class="MainClass" v-if="activeName.includes('人员管理')"></AUserRegulate>
                <BScheduleRegulate class="MainClass" v-if="activeName.includes('进度管理')"></BScheduleRegulate>
                <CEnvironment class="MainClass" v-if="activeName.includes('环境监测')"></CEnvironment>
                <DMonitoring class="MainClass" v-if="activeName.includes('智能监控')"></DMonitoring>
                <ERiskProject class="MainClass" v-if="activeName.includes('危大工程')"></ERiskProject>
                <FFoundation class="MainClass" v-if="activeName.includes('基坑监测')"></FFoundation>
                <GBenchProject class="MainClass" v-if="activeName.includes('顶管工程')"></GBenchProject>
                <HrepairProject class="MainClass" v-if="activeName.includes('修复工程')"></HrepairProject>
                <IShieldProject class="MainClass" v-if="activeName.includes('盾构工程')"></IShieldProject>
            </van-tab>
        </van-tabs>

        <!-- 底部导航 -->
        <tab-bar></tab-bar>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "@/store";
import AUserRegulate from "./AUserRegulate/index.vue";
import BScheduleRegulate from "./BScheduleRegulate/index.vue";
import CEnvironment from "./CEnvironment/index.vue";
import DMonitoring from "./DMonitoring/index.vue";
import ERiskProject from "./ERiskProject/index.vue";
import FFoundation from "./FFoundation/index.vue";
import GBenchProject from "./GBenchProject/index.vue";
import HrepairProject from "./HrepairProject/index.vue";
import IShieldProject from "./IShieldProject/index.vue";
export default defineComponent({
    components: {
        AUserRegulate,
        BScheduleRegulate,
        CEnvironment,
        DMonitoring,
        ERiskProject,
        FFoundation,
        GBenchProject,
        HrepairProject,
        IShieldProject,
    },
    setup() {
        const appStore = useAppStore();
        const activeName = ref(appStore.BdataPageName);

        const tabList = ref([
            {
                id: 0,
                title: '人员管理',
                path: '/UserRegulate',
                icon: new URL("@/assets/images/data/人员-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/人员.png", import.meta.url).href,
            },
            {
                id: 1,
                title: '进度管理',
                path: '/ScheduleRegulate',
                icon: new URL("@/assets/images/data/进度-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/进度.png", import.meta.url).href,
            },
            {
                id: 2,
                title: '环境监测',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/环境监测-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/环境监测.png", import.meta.url).href,
            },
            {
                id: 3,
                title: '智能监控',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/智能监控-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/智能监控.png", import.meta.url).href,
            },
            {
                id: 4,
                title: '危大工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/危大工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/危大工程.png", import.meta.url).href,
            },
            {
                id: 5,
                title: '基坑监测',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/基坑监测-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/基坑监测.png", import.meta.url).href,
            },
            {
                id: 6,
                title: '顶管工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/顶管工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/顶管工程.png", import.meta.url).href,
            },
            {
                id: 7,
                title: '修复工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/修复工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/修复工程.png", import.meta.url).href,
            },
            {
                id: 8,
                title: '盾构工程',
                path: '/projectManage',
                icon: new URL("@/assets/images/data/盾构工程-1.png", import.meta.url).href,
                activeIcon: new URL("@/assets/images/data/盾构工程.png", import.meta.url).href,
            }
        ]);
        const onClickTab = ({ name, title }) => {
            appStore.setBdataPageName(title);
        };

        onMounted(() => {
            if (appStore.projectInfo.professionalModules) {
                if (!(appStore.projectInfo.professionalModules.includes('1'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 5);
                }
                if (!(appStore.projectInfo.professionalModules.includes('2'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 6);
                }
                if (!(appStore.projectInfo.professionalModules.includes('3'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 7);
                }
                if (!(appStore.projectInfo.professionalModules.includes('4'))) {
                    tabList.value = tabList.value.filter(item => item.id !== 8);
                }
            } else {
                tabList.value.splice(-4);
            }
        });


        return {
            tabList,
            activeName,
            onClickTab,
            appStore,
        };
    },
});
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    // width: 100%;
}

.dataClass {
    margin: 2%;
    height: 79%;
    color: #fff;
    background-color: rgba(33, 46, 90, 0);
    --van-tabs-card-height: 144px;

    :deep(.van-tabs__wrap) {
        background-color: rgba(33, 46, 90, 0.5);
        margin: 4px 0;
    }

    :deep(.van-tabs__content) {
        height: 95%;
    }

    :deep(.van-tab__panel, .van-tab__panel-wrapper) {
        height: 100%;
    }

    :deep(.van-tabs__nav) {
        background: none;
    }

    :deep(.van-tabs__nav--card) {
        margin: 0;
        border: none;
    }

    :deep(.van-tab--card) {
        border-right: none;
    }

    :deep(.van-tab--card.van-tab--active) {
        background-color: rgba(33, 46, 90, 0);
    }

    .MainClass {
        margin: 15px;
        font-size: 28px;
        height: 100%;
    }


}
</style>